<template>
   <div>
      <button v-for="item in getNowChatList" :key="item.touid" class="ListOne flex" @click="SetChatContentNow(item)" :style="getStyle(item)"> 
          <img  :src="item.headphoto" class="headphoto"> 
          <div class="detail flex ">
               <div id="name" class="overflow">{{item.username}}</div>
               <div id="content" class="overflow " v-html="item.content" v-if="item.content"></div>
          </div>
          <div class="time flex">
               <div v-if="item.lasttime" id="time">{{item.lasttime|time }}</div>
               <div class="time button" v-if="item.top == 1">置顶</div>
               <el-badge :value="item.unread" :max="100" class="item flex" v-if="item.unread"></el-badge>
          </div>
      </button>

   </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex'

  export default 
  {
     name :'', 
     computed:{
        ...mapState('Chat',['Chatlist','ChatNow']),
        getNowChatList(){ //按时间排序
           let NewChatList=Object.assign([],this.Chatlist)
           for( let i=0; i<NewChatList.length ;i+=1){
               for(let j=i+1;j<NewChatList.length;j++){
                
                  if(NewChatList[i].top == 1 && NewChatList[j].top == null) 
                      break
                   if( this.$public.CompareTime(NewChatList[i].lasttime,NewChatList[j].lasttime)){
                     let time = NewChatList[i]
                     NewChatList[i]=NewChatList[j]
                     NewChatList[j]=time
                   }
               }
           }
           return NewChatList
        }
     },
   
     methods:{
      ...mapMutations('Chat',['SETCONTENT','SETCHATNOW']),
      getStyle({touid,top}){
         if( this.ChatNow && touid == this.ChatNow.touid || top == 1)
         return{background:'var(--GeneralBackColor)',color:'white'}
      },
       SetChatContentNow(item){
         this.SETCONTENT([1,item.username])
         this.SETCHATNOW(item)
       }
     },

    
  }
</script>
<style scoped lang='less'>
::v-deep .el-badge__content{
   border: none;
}

.ListOne{
   width: 100%;
   justify-content: flex-start;
   flex-wrap: nowrap;
   margin-bottom: 10px;
   height: 60px;
   padding: 5px;
   box-sizing: border-box;
   border-radius: 10px;
   position: relative;
}
.detail{
   width: 50%;
   height: 100%;
   margin-left: 5px;
   align-items: flex-start;
 

   div{
      width: 100%;
      text-align: left;
   }

   #name{
      font-size: 20px;
   }
}
div.button{
   width: auto;
   right: 30px;top: 25px;
   background: rgba(0, 0, 0, 0.5);
   border-radius: 5px;
   padding: 2px;
   color: white;
}
.time{
    position: absolute;
    right: 10px;top: 5px;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: right;
    width: 100px;

    #time{
      width: 100%;
      letter-spacing: 0;
      font-size: 15px;
    }
    .item{
      margin-top: 10px;
    
    }
}
</style>